<template>
    <div>
        <!--弹出层  添加编辑-->
        <el-dialog :visible.sync="visible" width="600px" :before-close="handleClose" append-to-body
            :title="!id ? '新增员工' : '编辑员工'">
            <el-form ref="form" :model="formAdd" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="员工头像" prop="headimg_url">
                            <el-image class="round-image" :src="formAdd.headimg_url">
                            </el-image>
                            <el-button type="primary" @click="isShowPic = true" size="mini"
                                style="margin-left: 10px;">上传头像</el-button>
                            <select-img :show="isShowPic" @update="cleanDiaglog" :selectType="imgnum" :source="1"
                                @selectSure="selectImgs" :type="0"></select-img>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="员工账号:" prop="account">
                            <el-input v-model="formAdd.account" placeholder="建议使用老师手机号码作为账号" size="small" clearable
                                :readonly="formAdd.readonly" :disabled="id ? true : false" />
                            <el-link type="info" style="font-size: 12px;">
                                请使用数字1-9字母a-z或A-Z且大于6位小于12位用于登录学校App或管理后台
                            </el-link>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="员工姓名:" prop="realname">
                            <el-input v-model="formAdd.realname" placeholder="限50字以内" size="small" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="角色:" prop="role_id" class="demo-form-inline">
                            <el-select size="mini" v-model="formAdd.role_id" placeholder="请选择" filterable clearable>
                                <el-option v-for="item in formAdd.roleList" :key="item.id" :label="item.role_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="员工生日:" prop="realname">
                            <div class="block">
                                <el-date-picker size="mini" v-model="formAdd.birthday" type="date"
                                    value-format="yyyy-MM-dd" placeholder="选择生日">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="所在班级:" prop="class_ids" class="demo-form-inline">
                            <el-select size="mini" v-model="formAdd.class_names" multiple placeholder="请选择" filterable
                                clearable>
                                <el-option collapse-tags="true" v-for="item in classList" :key="item.id"
                                    :label="item.class_name" :value="item.class_name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="员工性别:">
                            <el-radio-group v-model="formAdd.gender">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelForm" size="small">取 消</el-button>
                <el-button type="primary" @click="!formAdd.id ? submitFormAdd('formAdd') : subEditFormAdd('formAdd')"
                    size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import AddForm from "@/views/kanke/education/teacher/components/AddForm";
import { edit, getTeacherDetail, getTeacherList, getRoleList } from "@/api/kanke/teacher/teacher";
import { getClassData } from "@/api/kanke/gradeclass/gradeclass";
export default {
    name: "AddForm.vue",
    components: {
        AddForm
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        id: {
            //type: Number,
            default: 0
        },
        handleReload: {
            type: Function
        }
    },
    data() {
        return {
            classList: [],
            formAdd: {
                id: '',
                headimg_url: '',
                realname: '',
                account: '',
                role_id: 0,
                gender: 1,
                birthday: '',
                class_ids: [],
                class_names: [],
                readonly: false,
                roleList: []
                // roleList:[{'id':19,'role_name':'科目主管'}]
            },
            rules: {
                realname: [
                    { required: true, message: "员工姓名不能为空", trigger: "blur" }
                ],
                role_id: [
                    { required: true, message: "员工角色不能为空", trigger: "blur" }
                ],
                account: [{ required: true, message: "员工账号不能为空", trigger: "blur" }],
            },
            isShowPic: false,
            imgnum: 1,
        }
    },
    watch: {
        id: {
            handler(newVal) {
                this.init()
                // if (newVal) {
                //     this.init()
                // }
            },
            immediate: true
        }
    },
    created() {
        this.formAdd.id = this.id;
        this.init(true);
        this.getClassData();
    },
    mounted() {
        this.getRoleList();
    },
    methods: {
        init() {
            this.loading = true;
            if (this.id) {
                getTeacherDetail({ id: this.id }).then((res) => {
                    this.loading = false;
                    console.log(res)
                    this.formAdd.nickname = res.data.nickname;
                    this.formAdd.realname = res.data.realname;
                    this.formAdd.account = res.data.account
                    this.formAdd.mobile = res.data.mobile;
                    this.formAdd.gender = res.data.gender;
                    this.formAdd.class_name = res.data.class_name;
                    this.formAdd.class_names = res.data.class_names;
                    this.formAdd.class_ids = res.data.class_ids;
                    this.formAdd.role_name = res.data.role_name;
                    //this.formAdd.role_id = res.data.role_id;
                    //_that.formAdd.roleList = res.data.roleList;
                    this.formAdd.birthday = res.data.birthday;
                    this.formAdd.teacher_name = res.data.teacher_name;
                    this.formAdd.headimg_url = res.data.headimg_url;
                    this.formAdd.age = res.data.age;
                    this.formAdd.status = res.data.status;
                })
            } else {
                this.formAdd = {
                    id: '',
                    headimg_url: '',
                    realname: '',
                    account: '',
                    role_id: 0,
                    gender: 1,
                    birthday: '',
                    class_ids: [],
                    class_names: [],
                    readonly: false,
                    //roleList:[]
                    //roleList:[{'id':19,'role_name':'科目主管'}]
                }
            }
        },
        getClassData() {
            getClassData().then((res) => {
                console.log('classinfo', res);
                this.classList = res.data.list;
            })
        },
        getRoleList() {
            getRoleList().then((res) => {
                console.log('rolelist', res);
                this.formAdd.role_id = res.data.list[0].id;
                this.formAdd.roleList = res.data.list;
            })
        },
        cleanDiaglog() {
            this.isShowPic = false;
        },
        selectImgs(res) {
            this.formAdd.headimg_url = res[0].urls
            this.isShowPic = false;
        },
        handleClose(done) {
            this.$emit('update:visible', false);
        },
        cancelForm() {
            this.$emit('update:visible', false);
        },
        submitFormAdd(e) {
            console.log(e);
            edit(this.formAdd).then((res) => {
                // console.log(res)
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    // this.visible = false;
                    this.init();
                    this.$emit('update:visible', false);
                    this.$emit('handleReload');

                } else {
                    this.msgError(res.msg);
                }
            })

        },
        subEditFormAdd: function () {
            edit(this.formAdd).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg)
                    // this.visible=false;
                    this.init();
                    this.$emit('update:visible', false);
                    this.$emit('handleReload');
                } else {
                    this.msgError(res.msg);
                }
            })
        },
    }

}
</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 300px;
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.round-image {
    width: 55px;
    /* 或者你想要的大小 */
    height: 45px;
    /* 和宽度相同 */
    border-radius: 50%;
    /* 使得图片变为圆形 */
    overflow: hidden;
    /* 超出容器的图片部分将被隐藏 */
}
</style>